<template>
  <div class='index'>
    <!-- v-model用来获取当前是哪一个频道id。它与van-tab中的name属性一起工作
      由于“推荐”频道和其它频道中的文章极有可能重复，所以光传一个文章编号不能唯一确定要删除的文章。
      通过频道编号可以更方便快速找到这个文章
    -->
    <van-tabs v-model="curIndex">
      <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
        <!-- 频道与文章列表是一一对应的。每个频道都需要有一个文章列表组件。
        article-list写在了v-for中，则每次循环都会生成一个文章列表组件。
        van-tab具有类似于 懒加载的效果： 只有激活了当前的tab，才会去创建文章列表组件 -->
           <article-list :channel="channel" @showMoreAction="hShowMoreAction"></article-list>
      </van-tab>
    </van-tabs>
    <!--
      频道列表 开关 通过定位
      根据vuex中计算属性的使用完成语义化
    -->
    <div v-if="$store.getters.isLogin" class="bar-btn" @click="isShowChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>
    <!-- 文章---更多操作 -->
      <!-- <弹层>
      更多操作组件
    </弹层> -->
    <van-popup v-model="isSHowMoreAction" :style="{ width: '80%' }">
      <!--  @dislike="hDislike"： 处理不感兴趣
        @report="hReport": 处理举报
        @dislikeAuthor="hDislikeAuthor"处理拉黑作者 -->
      <more-action @report="hReport" @dislikeAuthor="hDislikeAuthor" @dislike="hDislike" ref="refMoreAction"></more-action>
    </van-popup>
    <!-- https://vant-contrib.gitee.io/vant/#/zh-CN/action-sheet -->
    <!-- 频道管理 -->
    <van-action-sheet @open="isOpen" v-model="isShowChannelEdit" title="频道管理">
      <!--
        1. 父传子。把当前订阅频道传给 频道编辑组件
         把当前用户选择的频道的下标传给 频道编辑组件
        2. 监听事件updateCurChannel
          跳转频道
      -->
      <channel-edit
      :channels="channels"
      :curIndex="curIndex"
      @updateCurChannel="hUpdateCurChannel"
      @updateCurIndex="hUpdateCurIndex"
      ref="refChannelEdit"
      >
      </channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { disLike, disLikeAuthor, report } from '@/api/article.js'
// 获取封装的接口
import { getChannels } from '@/api/channel.js'
// 文章组件
import ArticleList from './articleList.vue'
// 在index.vue中引用反馈的组件
import MoreAction from './moreAction.vue'
import ChannelEdit from './channelEdit'
export default {
  name: 'home-index',
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      articleId: null, // 当前要执行更多操作 的 文章编号
      authorId: null, // 当前要执行更多操作 的 文章作者编号
      isSHowMoreAction: false, // 是否显示更多操作弹层
      isShowChannelEdit: false, // 是否显示频道编辑弹层
      channels: [],
      curIndex: 0
    }
  },
  created () {
    // 初始化频道列表数据
    this.loadChannel()
  },
  computed: {
    // 获取当前用户选中的频道的id
    cChannelId () {
      return this.channels[this.curIndex].id
    }
  },
  methods: {
    // 获取频道列表数据
    async loadChannel () {
      const result = await getChannels()
      console.log(result)
      this.channels = result.data.data.channels
    },
    // 处理子组件channelEdit中用户在我的频道上点击的动作
    hUpdateCurChannel (idx) {
      console.log('响应 频道管理子组件', idx)
      // 1. 切换 频道
      this.curIndex = idx
      // 2. 关闭弹层
      this.isShowChannelEdit = false
    },
    isOpen () {
      if (this.$refs.refChannelEdit) {
        this.$refs.refChannelEdit.isEdit = false
      }
    },
    // 解决删除我的频道时，出现的小bug
    hUpdateCurIndex (idx) {
      this.curIndex = idx
    },
    // 处理子组件中抛出的：显示更多操作 的弹层
    hShowMoreAction (article) {
      console.log('测试')
      console.log('收到从子组件中传递的文章编号', article.articleId)
      this.articleId = article.articleId
      this.authorId = article.authorId
      this.isSHowMoreAction = true
      // 3. 重置moreAction.vue中的isReport
      // this.$refs.refMoreAction 找到子组件
      // 在页面打开时，弹层并没有显示，此时，moreAction组件并没有创建出来
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
      // console.log(this.$refs.refMoreAction)
    },
    // 处理用户在弹层中选择的 举报文章
    async hReport (reportTypeId) {
      console.log('父组件收到举报的类型是', reportTypeId)
      console.log('举报')
      // 1. 传递当前的文章编号 调用接口
      const result = await report(this.articleId, reportTypeId)
      console.log(result)
      // 2. 关闭弹层
      this.isSHowMoreAction = false
      // 3. 通知文章列表去删除这个文章
      //    eventBus传参数
      this.$eventBus.$emit('delArticle',
        {
          articleId: this.articleId,
          channelId: this.cChannelId
        }
      )
    },
    // 处理用户在弹层中选择的 拉黑作者事件
    async hDislikeAuthor () {
      console.log('用户点击了， 拉黑作者,当前要操作的文章编号是：', this.authorId)
      // 1. 调用后端接口
      const result = await disLikeAuthor(this.authorId)
      console.log(result)
      // 2. 退出弹层
      this.isSHowMoreAction = false
      // 3. 把用户点击的那个文章删除掉
      //    eventBus传参数
      this.$eventBus.$emit('delAuthor',
        {
          authorId: this.authorId,
          channelId: this.cChannelId
        }
      )
    },
    // 处理用户在弹层中选择的 不感兴趣事件
    async hDislike () {
      console.log('用户点击了， 不感兴趣,当前要操作的文章编号是：', this.articleId)
      // 1. 调用后端接口
      const result = await disLike(this.articleId)
      console.log(result)
      // 2. 退出弹层
      this.isSHowMoreAction = false
      // 3. 把用户点击的那个文章删除掉
      //    eventBus传参数
      this.$eventBus.$emit('delArticle',
        {
          articleId: this.articleId,
          channelId: this.cChannelId
        }
      )
    }
  }
}
</script>

<style scoped lang='less'></style>
